<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test</title>
<link rel="stylesheet" type="text/css" href="dir1/a.css" />
<style>
@import url('dir1/e.css');
* { color: #111 }
div.fixed ul>li:nth-child(-n+3) { background-color: yellowgreen }
div.fixed ul>li:nth-child(even) { color: red }
div.fixed { position: fixed; top: 120px; left: 100px }
div.fixed { border: 1px solid gray }
div.fixed>p { background-color: mistyrose; opacity: 0.7; }
</style>
<script src="../../uuAltCSS.js"></script>

</head>
<body>
<input type="button" value="revalidate" onclick="uuAltCSS()" />
<div class="fixed">
  <p>:nth-child</p>
  <pre style="text-align: left">
    &lt;link rel="stylesheet" type="text/css" href="a.css" /&gt;

    &lt;style&gt;
    @import url('e.css');
    * { color: #111 }
    div.fixed ul&gt;li:nth-child(-n+3) { background-color: yellowgreen }
    div.fixed ul&gt;li:nth-child(even) { color: red }
    div.fixed { position: fixed; top: 120px; left: 100px }
    div.fixed { border: 1px solid gray }
    div.fixed&gt;p { background-color: mistyrose; opacity: 0.7; }
    &lt;/style&gt;
  </pre>
  <p>上から3つの背景を黄緑に、一行間隔で赤くします。</p>
   <ul>
    <li>list1</li>
    <li>list2</li>
    <li>list3</li>
    <li>list4</li>
    <li>list5</li>
   </ul>
</div>
<div id="sample">
  <div>
    <pre>
      &lt;pre&gt;pre&lt;/pre&gt;
    </pre>
  </div>
  <div>
    <a href="http://example.com/">
        &lt;a href="http://example.com/"&gt;http://example.com&lt;/a&gt;
    </a>
  </div>
  <div>
    <b>
      &lt;b&gt;b&lt;/b&gt;
    </b>
  </div>
  <div>
    <canvas>
      &lt;canvas&gt;fallback content&lt;/canvas&gt;
    </canvas>
  </div>
</div>
</body>
</html>
